<template>
  <div>
    <el-card class="box-1">
      <div slot="header"><span>{{ title }}</span></div>
      <el-form ref="form" :model="form" :rules="formRules" label-width="160px">
        <el-form-item label="日志标题：" prop="name">
          <el-input v-model="form.title" />
        </el-form-item>
        <el-form-item label="文章详情">
          <ws-editor v-model="form['content']"/>
        </el-form-item>
        <el-form-item label="查看权限" prop="unit">
          <el-select v-model="form.read_power" placeholder="请选择查看权限">
            <el-option :value="0" label="全部"/>
            <el-option :value="1" label="内部"/>
            <el-option :value="2" label="外部"/>
          </el-select>
        </el-form-item>
        <el-form-item label="是否显示">
          <el-radio-group v-model="form.is_display">
            <el-radio :label="0">显示</el-radio>
            <el-radio :label="1">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
        <div style="text-align:center">
          <el-button type="primary" @click="submitForm('form')">保存</el-button>
          <el-button type="primary" @click="$router.back(-1)">取消</el-button>
        </div>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '',
      // ImageUrl: this.$store.getters.serverUrl,
ImageUrl: '',

      // 商品详情
      form: {
        read_power: 0,
        is_display: 0
      },
      formRules: {
        goods_name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        goods_type: [{ required: true, message: '请输入邮箱', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.title = this.$route.query.title
    if (this.$route.query.id) {
      this.id = this.$route.query.id
      this.getNews(this.$route.query.id)
    }
  },
  methods: {
    getNews(id) {
      const url = 'article/detail/' + id
      this.$store.dispatch('GetConnect', { url }).then(res => {
        this.form = res.data
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员')
      })
    },

    /**
     * 单提交方法,通过判断有没有form_id执行添加或编辑操作
     * formName: form表单中ref的值,即表单名
     */
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const data = this.form
          data.typeid = 3
          const url = this.id ? 'article/edit/' + this.id : 'article/create'
          this.$store.dispatch('GetConnect', { url, data }).then(res => {
            this.$message.success(res.msg)
            this.$router.back(-1)
          }).catch((err) => {
            this.$message.error(err.msg)
          })
        } else {
          this.$message.error('提交失败,请检查必填项')
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="scss" type="text/scss" scoped>
  @import '../../../styles/index.scss';
  .box-1 {
    max-width: 1000px;
    margin: 0 auto;
    > div span {
      font-size: 18px;
      font-weight: 600;
      padding: 0 10px;
    }
    .el-form {
      max-width: 900px;
      .title {
        font-weight: 600;
      }
      .remark {
        font-size: 13px;
        color: $textGray;
      }
      > div > .el-button {
        @extend .bg-green;
        width: 20%;
        min-width: 160px;
      }
    }
  }
</style>
